<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link th:href="@{/js/el/index.css}" rel="stylesheet"  type="text/css"/>
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <script th:src="@{/js/el/index.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>


</head>
<style>
    /*登录div的设置*/
    body{
        background-image:url(/img/login.jpg);
    }
    .myLogin {
        width: 300px;
        /*绝对定位的方式*/
        position: absolute;
        /*定位登录div的位置*/
        left: 60%;
        top: 40%;
        transform: translate(-40%, -60%);
        /*内边距*/
        padding-top: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }
</style>
<body>
<div id="app">
    <div class="myLogin">
        <h2>博客园</h2>
        <div>
            账号:<input  type="text" v-model="user.username" />
        </p>
            密码:<input  type="text" v-model="user.password" />
            </p>
            <div>
                <button v-on:click="godoLogin()">登录</button>
                <a href="/api/blog/hi1">进入</a>
                <a href="/api/fore/zhuce">注册</a>
            </div>



        </div>
    </div>

</div>



</body>
<script>
    new Vue({
        el:"#app",
        data:{
            user:{
                username:"",
                password:""
            }


        },
        methods:{
            godoLogin:function(){
                var that = this;
                axios({
                    url:"/dologin",
                    method: "post",
                    headers:{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                    params: that.user
                }).then(function (response) {
                    console.log(response.data);

                })
            }

        }

    })
</script>
</html>
